import { Tabs } from 'antd';
// @ts-ignore
import { FileTextOutlined } from '#/utils/antdIcons';
import OperationLog from './components/OperationLog';
import SystemOperationData from './SystemOperationData'; // 功率预测
import FrequentlyAskedQuestion from './FrequentlyAskedQuestion'; // 功率预测评价

import styles from './index.less';
import { useState } from 'react';

const SystemHelpCenter = () => {
  const { TabPane } = Tabs;
  const [tab, setTab] = useState<string>('1');
  const [visible, setVisible] = useState<boolean>(false);

  const onChange = (key?: string) => {
    key && setTab(key);
  };

  // 关闭操作日志
  const onClose = () => {
    setVisible(false);
  };

  const operations = () => {
    return (
      <div
        className={styles.operationLog}
        onClick={() => {
          setVisible(true);
        }}
      >
        <FileTextOutlined className={styles.logo} />
        <span className={styles.title}>操作日志</span>
      </div>
    );
  };

  return (
    <div className={styles.container}>
      <div className={styles.main}>
        <Tabs defaultActiveKey={tab} onChange={onChange} tabBarExtraContent={operations()}>
          <TabPane tab="系统操作资料管理" key="1">
            {tab === '1' && <SystemOperationData />}
          </TabPane>
          <TabPane tab="常见问题(FAQ)管理" key="2">
            {tab === '2' && <FrequentlyAskedQuestion />}
          </TabPane>
        </Tabs>
      </div>
      <OperationLog visible={visible} onClose={onClose} />
    </div>
  );
};

export default SystemHelpCenter;
